<ng-container *ngIf="info">
  <nz-card nzTitle="MyGeneInfo">
    <nz-card-tab>
      <nz-tabset
        nzSize="small"
        (nzSelectChange)="tabChange($event)"
        [nzAnimated]="true">
        <nz-tab [nzTitle]="'Overview'"> </nz-tab>
        <nz-tab [nzTitle]="'Summary'"> </nz-tab>
        <nz-tab
          [nzTitle]="
            'Protein Domains (' + info.interproList.length + ')'
          "></nz-tab>
        <nz-tab [nzTitle]="'Pathways (' + info.pathway.length + ')'"></nz-tab>
      </nz-tabset>
    </nz-card-tab>
    <ng-container [ngSwitch]="tabIndex">
      <!-- overview tab -->
      <ng-container *ngSwitchCase="0">
        <div class="tab-padding">
          <nz-descriptions
            nzSize="small"
            [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <nz-descriptions-item nzTitle="Entrez Symbol">
              {{ info.symbol }} (ID: {{ info._id }})
            </nz-descriptions-item>
            <nz-descriptions-item nzTitle="UniProtKB ID">
              @if (
                info.uniprot['Swiss-Prot'] && info.uniprot['Swiss-Prot'].trim()
              ) {
                <cvc-link-tag
                  href="https://www.uniprot.org/uniprotkb/{{
                    info.uniprot['Swiss-Prot']
                  }}/entry"
                  tooltip="View in UniProt">
                  {{ info.uniprot['Swiss-Prot'] }}
                </cvc-link-tag>
              } @else {
                <span
                  nz-typography
                  nzType="secondary"
                  >N/A</span
                >
              }
            </nz-descriptions-item>
          </nz-descriptions>
          <nz-descriptions
            nzSize="small"
            [nzColumn]="{ xxl: 4, xl: 4, lg: 2, md: 2, sm: 1, xs: 1 }">
            <nz-descriptions-item nzTitle="Chromosome">
              {{ info.genomic_pos_hg19.chr }}
            </nz-descriptions-item>
            <nz-descriptions-item nzTitle="Strand">
              {{ info.genomic_pos_hg19.strand }}
            </nz-descriptions-item>
            <nz-descriptions-item nzTitle="Start">
              {{ info.genomic_pos_hg19.start }}
            </nz-descriptions-item>
            <nz-descriptions-item nzTitle="Stop">
              {{ info.genomic_pos_hg19.end }}
            </nz-descriptions-item>
          </nz-descriptions>
          <nz-descriptions
            nzBordered="true"
            nzSize="small"
            [nzColumn]="1">
            <nz-descriptions-item nzTitle="Aliases">
              {{ info.alias.join(', ') }}
            </nz-descriptions-item>
            <nz-descriptions-item nzTitle="Protein Domains">
              <p
                nz-typography
                nzEllipsis
                nzExpandable
                [nzEllipsisRows]="3">
                {{ info.interproList.join(', ') }}
              </p>
            </nz-descriptions-item>
            <nz-descriptions-item nzTitle="Pathways">
              <p
                nz-typography
                nzEllipsis
                nzExpandable
                [nzEllipsisRows]="3">
                {{ info.pathwayList.join(', ') }}
              </p>
            </nz-descriptions-item>
          </nz-descriptions>
        </div>
      </ng-container>

      <!-- summary tab -->
      <ng-container *ngSwitchCase="1">
        <div class="tab-padding">
          <p
            nz-typography
            nzEllipsis
            nzExpandable
            [nzEllipsisRows]="12">
            {{ info.summary }}
          </p>
        </div>
      </ng-container>

      <!-- protein domains tab -->
      <ng-container *ngSwitchCase="2">
        <nz-table
          #proteinDomainsTable
          [nzData]="info.interpro"
          [nzScroll]="{ x: '100%', y: '200px' }"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          nzSize="small">
          <thead>
            <tr>
              <th>Name</th>
              <th>Description</th>
              <th>ID</th>
            </tr>
          </thead>
          <tbody>
            <ng-template
              nz-virtual-scroll
              let-interpro
              let-index="index">
              <tr>
                <td>
                  {{ interpro.short_desc }}
                </td>
                <td>
                  {{ interpro.desc }}
                </td>
                <td>
                  {{ interpro.id }}
                </td>
              </tr>
            </ng-template>
          </tbody>
        </nz-table>
      </ng-container>

      <!-- pathways tab -->
      <ng-container *ngSwitchCase="3">
        <nz-table
          #pathwaysTable
          [nzData]="info.pathway"
          [nzScroll]="{ x: '100%', y: '200px' }"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
          nzSize="small">
          <colgroup>
            <col width="90%" />
            <col width="10%" />
          </colgroup>
          <thead>
            <tr>
              <th>Name</th>
              <th class="button-col">Source</th>
            </tr>
          </thead>
          <tbody>
            <ng-template
              nz-virtual-scroll
              let-pathway
              let-index="index">
              <tr>
                <td>
                  {{ pathway.name }}
                </td>
                <td class="button-col">
                  <a
                    *ngIf="pathway?.link; else noPathwayLink"
                    nz-button
                    href="{{ pathway?.link }}"
                    target="_blank"
                    nzType="default"
                    nzSize="small">
                    {{ pathway.src }}
                  </a>
                  <ng-template #noPathwayLink>
                    {{ pathway.src }}
                  </ng-template>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </nz-table>
      </ng-container>
    </ng-container>
  </nz-card>
</ng-container>
